import { PageHeader } from '@/components/page-header';
import { Card, Button } from '@/components/base';
import { Typography } from '@/components/typography';
import { useNavigate, useParams } from 'react-router-dom';
import { EditOutlined } from '@ant-design/icons';
import React from 'react';
import styles from './index.module.less';

const { Text } = Typography;

export default function ProductDetail() {
    const navigate = useNavigate();
    const { id } = useParams<{ id: string }>();

    const handleBack = () => {
        navigate(-1);
    };

    return (
        <div className={styles['product-detail']}>
            <PageHeader 
                title="产品详情" 
                onBack={handleBack}
                extra={
                    <Button
                        size='small'
                        color='primary'
                        onClick={() => navigate(`/product-detail-form?id=${id}`)}
                    >
                        <EditOutlined />
                        <span>编辑</span>
                    </Button>
                }
            />
            <div className={styles['content']}>
                <Card>
                    <Text size={16} strong>产品详情页面开发中...</Text>
                    <Text size={14} type="secondary" style={{ marginTop: 8, display: 'block' }}>
                        产品ID: {id}
                    </Text>
                </Card>
            </div>
        </div>
    );
} 